<template>
  <div class="login">
    <div class="box">
      <a-form
        :model="formState"
        name="normal_login"
        class="login-form"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <h1>系统登录</h1>
        <a-form-item
          name="username"
          :rules="[{ required: true, message: '请输入合法用户名' }]"
        >
          <a-input v-model:value="formState.username">
            <template #prefix>
              <UserOutlined class="site-form-item-icon" />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item
          name="password"
          :rules="[{ required: true, message: '请输入密码' }]"
        >
          <a-input-password v-model:value="formState.password">
            <template #prefix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </a-input-password>
        </a-form-item>
        <a-form-item>
          <a-button
            :disabled="disabled"
            type="primary"
            html-type="submit"
            class="login-form-button"
          >
            登录
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, reactive, computed } from "vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { appStore } from "../store/index";

interface FormState {
  username: string;
  password: string;
  remember: boolean;
}
const formState = reactive<FormState>({
  username: "admin999",
  password: "admin999",
  remember: true,
});

const store:any = appStore();
//登录按钮
const onFinish = (values: any) => {
  store.Login_user(values);
  console.log(store);
 
};

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};
const disabled = computed(() => {
  return !(formState.username && formState.password);
});
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100vh;

  background-image: url("http://websong.wang:3002/static/img/login-bg.0a3a597b.jpg");
  display: flex;
  justify-content: center;
  align-items: center;
  .box {
    width: 400px;
    background: white;
    height: 300px;
    border-radius: 10px;
    box-shadow: #ccc 10px 5px 5px 5px;
    .ant-form {
      padding: 0 40px;
      h1 {
        height: 100px;
        text-align: center;
        line-height: 100px;
        font-weight: 800;
      }
      .login-form-button {
        width: 100%;
        height: 40px;
        background: skyblue;
      }
    }
  }
}
</style>